<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Logistics-model</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>
</head>

<body class="bg-dark">

<div class="container-fluid bg-dark">


    <!-- ---------- HEADER ---------- !-->
    <div class="header">

        <!-- ---------- HEADER-TOP-LINE !-->
        <div class="container-fluid bg-golden">
            <div class="header__top-line container-xxl">
                <div class="row">
                    <div class="col">
                        <a class="active-lang" href="#">РУС&nbsp &nbsp</a>
                        <a class="inactive-lang" href="#">ENG&nbsp &nbsp</a>
                        <a class="inactive-lang" href="#">FR</a>
                    </div>
                    <div class="col">8 (800) 123-45-67</div>
                    <div class="col"><a href="#">sales@log.ru</a></div>
                </div>
            </div>
        </div>

        <!-- ---------- HEADER-BOT-LINE !-->
        <div class="container-fluid bg-dark">
            <div class="header__bot-line container-xxl">
                <div class="row">
                    <div class="col col-sm-3 header__logo">
                        <img src="img/logo.png" alt="">
                    </div>
                    <div class="col col-sm-2">
                        <img src="img/location.svg" alt="">Наши офисы
                    </div>
                    <div class="col col-sm-1 space-block"></div>
                    <div class="col col-sm-6">
                        <ul>
                            <li>услуги</li>
                            <li>о компании</li>
                            <li>вакансии</li>
                            <li>контакты</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- ---------- IMAGE-BLOCK ---------- !-->
    <div class="image-block">
        <div class="image-block__text-block col-6 mx-auto">
            <p class="common-title-l">Грузовые перевозки</p>
            <p class="common-text-m">
                Перевозка крупногабаритных грузов по России и Европе.
                Полное экспедирование,<br> страхование, упаковка и хранение грузов</p>
        </div>
        <img class="image-block__mouse" src="img/mouse.svg" alt="">
    </div>


    <!-- ---------- TRUCKING-BLOCK ---------- !-->
    <div class="trucking-block bg-grey">

        <!-- ---------- CONTRAST-BLOCK !-->
        <div class="contrast-block bg-dark"></div>

        <!-- ---------- TRUCKING-CONTENT-BLOCK !-->
        <div class="container-xl content-block">
            <div class="trucking-block__left-block col-3">
                <div class="title-block">
                    <hr class="brand-hr">
                    <p class="common-title-m">грузоперевозки по европе</p>
                </div>
                <p class="common-text-m">Страны Евросоюза, а также Украина,
                    Белоруссия со всеми документами.</p>
                <button>подробнее</button>
            </div>
            <div class="trucking-block__truck-image col-3">
                <img src="img/truck.png" alt="">
            </div>
            <div class="trucking-block__button-block col-3">
                <button class="arrow-button">
                    <span>СЛЕД</span>
                    <img src="img/next.svg" alt="">
                </button>
                <button class="arrow-button">
                    <img src="img/prev.svg" alt="">
                    <span>пред</span>
                </button>
            </div>
        </div>
    </div>


    <!-- ---------- SERVICE-BLOCK ---------- !-->
    <div class="service-block">

        <!-- ---------- SERVICE-CONTENT-BLOCK !-->
        <div class="container-xl content-block">
            <div class="title-block">
                <hr class="brand-hr">
                <p class="common-title-m">услуги</p>
            </div>

            <!-- ---------- SERVICE-BUTTON-BLOCK !-->
            <div class="service-block__button-block">
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
                <div class="col-3">
                    <button class="service-button">
                            <span class="image-plane">
                            <img class="image-plane-active" src="img/active-plane.png" alt="">
                            <img class="image-plane-inactive" src="img/plane.png" alt="">
                            </span>
                        <span class="text-plane">Авиаперевозки</span>
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!-- ---------- COMPANY-BLOCK ---------- !-->
    <div class="company-block">

        <!-- ---------- CONTRAST-BLOCK !-->
        <div class="contrast-block bg-grey"></div>

        <!-- ---------- COMPANY-CONTENT-BLOCK !-->
        <div class="container-xl content-block">
            <div class="row">

                <div class="company-block__title-block title-block col-3">
                    <hr class="brand-hr">
                    <p class="common-title-m">о компании</p>
                </div>

                <div class="company-block__text-block common-text-m">Lorem Ipsum - это текст-"рыба", часто используемый
                    в печати
                    и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В
                    то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem
                    Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять
                    веков, но и перешагнул в электронный дизайн.
                </div>

                <div class="company-block__benefits-block col-7">

                    <div class="benefits-item col-xs-2">
                        <p>48</p>
                        <p>офисов</p>
                        <p>В Европе и СНГ</p>
                    </div>
                    <div class="benefits-item">
                        <p>361</p>
                        <p>грузовиков</p>
                        <p>Volvo, Scania</p>
                    </div>
                    <div class="benefits-item">
                        <img src="img/about.jpg" alt="">
                    </div>
                    <div class="benefits-item">
                        <img src="img/about.jpg" alt="">
                    </div>
                    <div class="benefits-item">
                        <p>1500</p>
                        <p>сотрудников</p>
                        <p>профессионалов</p>
                    </div>


                </div>

            </div>
        </div>
    </div>


    <!-- ---------- MAP-BLOCK ---------- !-->
    <div class="map-block">
        <div class="map col-6 mx-auto"></div>
    </div>


    <!-- ---------- FOOTER ---------- !-->
    <div class="footer">
        <div class="container-fluid bg-golden">
            <div class="container-xxl">
                <div class="row">
                    <div class="footer__section footer__logo col-4">
                        <img src="img/logo-2.svg" alt="">
                    </div>
                    <div class="footer__section footer__location col-4">
                        <p>123456, Санкт-Петербург, Невский пр-кт 127</p>
                        <p class="text-dark">sales@log.ru</p>
                    </div>
                    <div class="footer__section footer__telephone col-4">
                        <p>+7 (812) 344-56-65</p>
                        <p>+7 (812) 355-56-65</p>
                    </div>
                </div>
            </div>
        </div>
    </div>



</div>

</body>
</html>